<template>
  <image
    :class="className || 'default_size'"
    :src="src.includes('http') ?  src  : imageUrl + '/img/' + src"
    lazy-load
    :mode="mode"
  >

  </image>
</template>

<script>
  export default {
    name: "my-img",
    props: {
      src: {
        type: String,
        default: ''
      },
      className: {
        type: String,
        default: ''
      },
      mode:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        imageUrl: this.$imageUrl
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../uni.scss";

  .default_size {
    width: 100%;
    height: 100%;
  }

  .background-img {
    z-index: 99999999999999;
    position: absolute;
    top: upx(-150);
    left: 0;
    right: 0;
    margin: auto;
    width: upx(400);
    height: upx(256);
  }

  .cl {
    z-index: 99999999999999;
    position: absolute;
    top: upx(20);
    right: upx(30);
    width: upx(36);
    height: upx(36);
  }

</style>
